<template>
  <view style="background: #fff;">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
    <view class="content">
      <view class="row u-flex">
        <view class="nominal">
          收货人
        </view>
        <view class="input">
          <input placeholder="请输入收货人姓名" type="text" v-model="receiveName" style="width:100%" />
        </view>
      </view>
      <view class="row u-flex">
        <view class="nominal">
          手机号
        </view>
        <view class="input">
          <input placeholder="请输入收货人电话号码" type="text" v-model="mobile" style="width:100%" />
        </view>
      </view>
      <uni-data-picker v-slot:default placeholder="请选择所在地区" popup-title="请选择所在地区" :localdata="dataTree"
        :map="{text:'areaName',value:'areaId'}" @change="onchange" @popupopened="onpopupopened"
        @popupclosed="onpopupclosed" :clear-icon="false" style="width:100%">
        <view class="row u-flex" style="width:100%">
          <view class="nominal">
            所在地区
          </view>
          <view class="input" style="display: block;">
            {{areaInfo}}
          </view>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </uni-data-picker>
      <view class="row u-flex">
        <view class="nominal">
          详细地址
        </view>
        <view class="input">
          <textarea v-model="addressInfo" auto-height="true" placeholder="输入详细地址" style="width:100%"></textarea>
        </view>
      </view>
      <view class="row u-flex">
        <view class="nominal">
          默认地址
        </view>
        <view class="input switch">
          <switch :checked="isDefault" @change="isDefaultChange" />
        </view>
      </view>

    </view>
    <view class="save u-flex"
      :style="{paddingBottom:systemInfo.tabbarPaddingB+'px',paddingLeft:'20rpx',paddingRight:'20rpx'}">
      <u-button :plain="true" shape="circle" v-if="editType=='edit'" @tap="del">删除地址</u-button>
      <u-button type="primary" shape="circle" @tap="save" :loading="btnLoading">保存地址</u-button>
    </view>
  </view>
</template>

<script>
  import base from '@/config/baseUrl.js';

  import {
    setEditAddress,
    delAddress,
    getAddressInfo,
    getAreaList
  } from '@/config/api.js'
  export default {

    data() {
      return {
        systemInfo: base.systemInfo,
        editType: 'edit',
        id: '',
        receiveName: '',
        mobile: '',
        addressInfo: '',
        isDefault: false,
        areaInfo: '',
        dataTree: [],
        btnLoading: false,
      }

    },
    onLoad(e) {
      //获取传递过来的参数
      this.editType = e.type;
      this.id = e.addressId;
      console.log("receiveName", this.receiveName)
      this.getDataList();
      if (e.type == 'edit') {
        this.getInfo();
      }

    },
    methods: {
      getDataList() {
        getAreaList().then((res) => {
          this.dataTree = res;
        })
      },
      onpopupopened() {
        console.log('popupopened');
      },
      onpopupclosed() {
        console.log('popupclosed');
      },
      onchange(e) {
        let ids = [];
        let txts = [];
        e.detail.value.forEach((item) => {
          txts.push(item.text)
          ids.push(item.value)
        });
        this.provinceId = ids[0] ? ids[0] : ''
        this.cityId = ids[1] ? ids[1] : ''
        this.areaId = ids[2] ? ids[2] : ''
        this.areaInfo = txts.join(" ")
      },
      getInfo() {
        getAddressInfo({
          addressId: this.id
        }).then((res) => {
          this.receiveName = res.receiveName;
          this.provinceId = res.provinceId;
          this.cityId = res.cityId;
          this.areaId = res.areaId;
          this.mobile = res.mobile;
          this.areaInfo = res.areaInfo;
          this.addressInfo = res.addressInfo;
          this.isDefault = res.isDefault == 1 ? true : false
        })
      },

      isDefaultChange(e) {
        this.isDefault = e.detail.value;
      },
      del() {
        uni.showModal({
          title: '删除提示',
          content: '您将删除这个收货地址',
          success: (res) => {
            if (res.confirm) {

              uni.setStorage({
                key: 'delAddress',
                data: {
                  id: this.id
                }
              })
              delAddress({
                addressId: this.id
              }).then(() => {
                uni.navigateBack();
              })

            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });

      },
      save() {
        let data = {
          "receiveName": this.receiveName,
          "mobile": this.mobile,
          "addressInfo": this.addressInfo,
          "isDefault": this.isDefault ? 1 : 0,
          provinceId: this.provinceId,
          cityId: this.cityId,
          areaId: this.areaId,
        }
		let reg = /^1(0|1|2|3|4|5|6|7|8|9)\d{9}$/;
        if (this.editType == 'edit') {
          data.addressId = this.id
        }
        if (!data.receiveName) {
          uni.showToast({
            title: '请输入收货人姓名',
            icon: 'none'
          });
          return;
        }
        if(!data.mobile) {
          uni.showToast({
            title: '请输入收货人电话号码',
            icon: 'none'
          });
          return;
        }else if(!reg.test(data.mobile)){
			uni.showToast({
			  title: '请输入正确的手机号',
			  icon: 'none'
			});
			return;
		}
        if (!data.areaId) {
          uni.showToast({
            title: '请选择收货地区',
            icon: 'none'
          });
          return;
        }
        if (!data.addressInfo) {
          uni.showToast({
            title: '请输入收货详细地址',
            icon: 'none'
          });
          return;
        }
        this.btnLoading = true;
        uni.showLoading({
          title: '正在提交'
        })
        //实际应用中请提交ajax,模板定时器模拟提交效果
        setEditAddress(data).then(() => {
          uni.setStorage({
            key: 'saveAddress',
            data: {
              id: this.id
            }
          })
          uni.hideLoading();
          uni.navigateBack();
          this.btnLoading = false;
        }).catch(() => {
          this.btnLoading = false;
        })



      }
    },


  };
</script>
<style lang="scss" scoped>
  .save {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 120upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;

    .btn {
      width: 48%;
      height: 80upx;
      border-radius: 80upx;
      background-color: #ff9d02;
      color: #fff;
      font-size: 30upx;
      text-align: center;
      line-height: 80upx;
    }

    .del {
      color: #f06c7a;
      background-color: rgba(255, 0, 0, 0.05);
      border-bottom: solid 1upx #eee;
    }
  }

  .content {
    display: flex;
    flex-wrap: wrap;

    view {
      display: flex;
    }

    .row {
      width: 100%;
      padding: 0 24rpx;
      border-top: solid 1upx #eee;

      .nominal {
        width: 30%;
        height: 120upx;
        font-size: 30upx;
        align-items: center;
      }

      .input {
        width: 100%;
        padding: 20upx 0;
        align-items: center;
        font-size: 30upx;
        text-align: right;

        &.switch {
          justify-content: flex-end;
        }

        .textarea {
          margin: 20upx 0;
          min-height: 120upx;
        }
      }

    }
  }

  .uni-data-tree {
    width: 100%
  }
</style>